/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

// 网点公众号管理

import React, { useState, useCallback, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import DragTable from '@/components/DragTable';
import ProForm from '@ant-design/pro-form';
import KbImage from '@/components/KbImage';
import { Button, Drawer } from 'antd';
import { useLocation, useSelector } from 'umi';
import type { ConnectState } from '@/models/connect';
import { getAccountsList } from '@/services/networkWxmini';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { Location } from 'umi';
import styles from '../index.less';

const NetworkWx: React.FC = () => {
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const actionRef = useRef<ActionType>();

  const [visible, setVisible] = useState(false);
  const [imgUrl, setImgUrl] = useState('');
  const { query: urlParams } = useLocation() as Location;

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      search: false,
    },
    {
      title: '平台',
      dataIndex: 'open_platform',
      align: 'center',
      search: false,
    },
    {
      title: 'iu_id',
      dataIndex: 'iu_id',
      align: 'center',
      search: false,
    },
    {
      title: 'uid',
      dataIndex: 'uid',
      align: 'center',
      search: false,
    },
    {
      title: 'platform',
      dataIndex: 'platform',
      align: 'center',
      search: false,
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      align: 'center',
      search: false,
    },
    {
      title: '备注',
      dataIndex: 'u_note',
      align: 'center',
      search: false,
    },
    {
      title: 'root',
      dataIndex: 'is_root',
      align: 'center',
      search: false,
      render: (is_root) => (is_root == 1 ? '是' : '否'),
    },
    {
      title: '添加时间',
      dataIndex: 'create_time',
      align: 'center',
      search: false,
    },
  ];

  const fetchTableList = (params: any) => {
    const { current: page } = params;
    return getAccountsList({
      action: 'getManagerList',
      page,
      limit: 20,
      ...urlParams,
    });
  };

  const onSubmit = useCallback(async () => {
    window.history.back();
  }, []);

  const addManager = async () => {
    getAccountsList({ action: 'addManager', ...urlParams }).then((data) => {
      if (data.url) {
        setImgUrl(data.url);
        setVisible(true);
      }
    });
  };

  const onClose = useCallback(() => {
    setVisible(false);
  }, []);

  return (
    <PageContainer className={styles.main} title=''>
      <ProForm
        layout='inline'
        onFinish={onSubmit}
        submitter={{
          render: (props) => {
            return [
              <Button type='primary' key='submit' onClick={() => props.form?.submit?.()}>
                返回
              </Button>,
              <Button type='primary' key='submit' onClick={addManager}>
                添加管理员
              </Button>,
            ];
          },
        }}
      />
      <Drawer
        title='添加管理员'
        width={winSize === 'xs' ? 300 : 460}
        visible={visible}
        onClose={onClose}
        getContainer={false}
        placement='right'
      >
        <KbImage src={imgUrl} />
      </Drawer>
      <DragTable>
        <ProTable
          className='kb-pro-table'
          actionRef={actionRef}
          pagination={{
            pageSize: 20,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          rowKey='id'
          request={fetchTableList}
          columns={columns}
          search={false}
          options={false}
          scroll={{ x: 1200 }}
        />
      </DragTable>
    </PageContainer>
  );
};

export default NetworkWx;
